<template>
	<view class="content">
		<view style="width: 100%;background-color: #fff;">
			<lifestyle v-if="canUse" sceneId="0e6868b728564607a77e3d778d8e9a9e" />
			<view v-else>请升级支付宝支持关注生活号组件</view>
		</view>
		<view class="home_box">
			<image src="../../static/home.png"></image>
		</view>
		<view class="form">
			<view class="form_item" @click="onOpenMultiLevelSelect">
				<view class="left_box">
					<image src="../../static/icon1.png"></image>
					<view class="label_box">
						<view>所在城市</view>
						<view>{{form.provincialCityDistrict ? form.provincialCityDistrict : '请选择'}}</view>
					</view>
				</view>
				<view>
					<u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>
			<view class="form_item"
				@click="onNav(`/pages/inputValue/index?field=carDiy${form.carDiy ? `:${form.carDiy}` : ''}&title=车辆类型`)">
				<view class="left_box">
					<image src="../../static/icon2.png"></image>
					<view class="label_box">
						<view>车辆类型</view>
						<view>{{form.carDiy ? form.carDiy :'请选择车辆类型'}}</view>
					</view>
				</view>
				<view>
					<u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>
			<view class="form_item" @click="onOpenTime">
				<view class="left_box">
					<image src="../../static/icon3.png"></image>
					<view class="label_box">
						<view>上牌时间</view>
						<view>{{form.time ? form.time :'请选择上牌时间'}}</view>
					</view>
				</view>
				<view>
					<u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>
			<view class="line"></view>
			<view class="form_item">
				<view class="left_box">
					<image src="../../static/icon4.png"></image>
					<view>行驶里程/万公里</view>
				</view>
				<view>
					<u-input border="none" inputAlign="right" type="number" placeholder="请填写行驶多少公里" />
					<!-- <u-icon name="arrow-right" size="24"></u-icon> -->
				</view>
			</view>
			<view class="form_item"
				@click="onNav(`/pages/inputValue/index?field=phone${form.phone ? ':'+form.phone : ''},vcode${form.vcode ?':'+ form.vcode : ''}&title=联系方式`)">
				<view class="left_box" style="width: 60%;">
					<image src="../../static/icon5.png"></image>
					<view>联系方式</view>
					<view v-if="form.vcode">
						<image style="width: 24rpx;height: 24rpx;margin-right: 4rpx;margin-left: 8rpx;"
							src="../../static/authentication.png"></image>
						<text style="color: #297EFF;font-size: 24rpx;">已验证</text>
					</view>
				</view>
				<view style="width: 40%;">
					<u-input v-model="form.phone" border="none" inputAlign="right" type="number"
						placeholder="请填写联系方式" />
				</view>
			</view>
			<view class="line"></view>
			<view class="form_item" @click="setRadio">
				<view class="left_box">
					<image src="../../static/icon6.png"></image>
					<view class="label_box">
						<view>精准估值服务</view>
						<view>选择后将提交卖车信息，享专属卖车咨询服务</view>
					</view>
				</view>
				<view>
					<image style="width: 40rpx;height: 40rpx;" v-if="radio" src="../../static/radio_select.png"></image>
					<image style="width: 40rpx;height: 40rpx;" v-else src="../../static/radio.png"></image>
					<!-- <u-icon name="arrow-right" size="24"></u-icon> -->
				</view>
			</view>
			<view class="submit_box">
				<view class="submit" @click="onSubmit">快速评估</view>
				<view class="agreement_text" @click="onNav('/pages/agreement/index?type=1')">
					<text>点击即代表同意</text>
					<text>《个人信息保护声明》</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import arae from '@/utlis/arae.js';
	import {
		requsetGet
	} from '../../utlis/request';
	export default {
		data() {
			return {
				canUse: my.canIUse('lifestyle'),
				radio: true,
				field: '',
				form: {
					time: '',
					provincialCityDistrict: '',
					carDiy: '',
					phone: '',
					vcode: '',
				}
			}
		},
		onLoad() {},
		onShow() {
			uni.$on('fieldValue', (res) => {
				res.fieldKeys.split(',').forEach((key) => {
					this.form[key] = res.form[key];
				})
			})
		},
		methods: {
			async onSubmit() {
				const values = {
					...this.form,
					channelId: 100055,
				};
				if (!values.phone) {
					return uni.showToast({
						title: `请输入手机号`,
						icon: 'none'
					})
				}
				if (!(/^1[3-9]\d{9}$/.test(values.phone))) {
					return uni.showToast({
						title: `请输入一个正确的手机号码`,
						icon: 'none'
					})
				}
				if (!values.vcode) {
					return uni.showToast({
						title: `请输入验证码`,
						icon: 'none'
					})
				}
				const {
					code,
					msg
				} = await requsetGet('/ClientUserController/verifyVCode', values);
				if (code == 200) {
					uni.navigateTo({
						url: '/pages/success/index'
					})
				} else {
					uni.showToast({
						title: msg,
						icon: 'none'
					})
				}

			},
			setRadio() {
				this.radio = !this.radio;
			},
			onOpenTime() {
				my.datePicker({
					startDate: '1990-01-01',
					endDate: new Date(),
					success: (value) => {
						this.form.time = value.date;
					}
				})
			},
			onOpenMultiLevelSelect() {
				my.multiLevelSelect({
					title: '地区选择',
					list: arae,
					success: (res) => {
						this.form.provincialCityDistrict = res.result.map(t => t.name).join('-');
					}
				})
			},
			onNav(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>